<template>

    <el-dialog v-if="isShow" class="quickReportingOuter" :showTitle="false"  :visible.sync="dialogVisible.outerVisible">
            <el-dialog
                    width="30%"
                    :showTitle="false"
                    :visible.sync="innerVisible"
                    append-to-body>
            </el-dialog>
            <section class="title">
                <span class="spanTitle">创建快速报告</span>
                <el-radio-group v-model="radio">
                    <el-radio :label="3">HTML</el-radio>
                    <el-radio :label="6">PPT</el-radio>
                    <el-radio :label="9">WORD</el-radio>
                </el-radio-group>
            </section>
            <section>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                    <el-form-item label="所属项目" prop="project" placeholder="请选择所属项目">
                        <el-input v-model="ruleForm.project"></el-input>
                    </el-form-item>
                    <el-form-item label="选择模板" prop="template" required>
                        <el-select v-model="ruleForm.template" placeholder="请选择模板">
                            <el-option label="系统数据看板模板（默认）" value="defaultTemplate"></el-option>
                            <el-option label="shanghai" value="shanghai"></el-option>
                            <el-option label="beijing" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="报告类型" prop="reportType" required>
                        <el-select v-model="ruleForm.reportType" placeholder="请选择报告类型">
                            <el-option label="日报" value="day"></el-option>
                            <el-option label="月报" value="month"></el-option>
                            <el-option label="年报" value="year"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="报告日期" required class="time">
                            <el-form-item prop="reportDate">
                                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.reportDate" style="width: 100%;"></el-date-picker>
                            </el-form-item>

                    </el-form-item>
                    <el-form-item label="报告名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="数据范围" required  class="timeArea">
                            <el-form-item prop="startData" class="innerTime">
                                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.startData" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                            <div class="middleLine"></div>

                            <el-form-item prop="endDate" class="innerTime">
                                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.endDate" style="width: 100%;"></el-date-picker>
                            </el-form-item>

                    </el-form-item>
                    <el-form-item class="formFooter">
                        <el-button type="primary" @click="submitForm('ruleForm')">生成报告</el-button>
                        <el-button type="primary" @click="send('ruleForm')">发送设置</el-button>
                        <el-button type="primary" @click="dialogVisible.outerVisible = false">取 消</el-button>
                    </el-form-item>
                </el-form>
            </section>
        </el-dialog>

    <el-dialog v-else class="quickReportingOuter" :showTitle="false"  :visible.sync="dialogVisible.outerVisible">
        <el-dialog
                width="30%"
                :showTitle="false"
                :visible.sync="innerVisible"
                append-to-body>
        </el-dialog>
        <div v-if="false" slot="title"></div>
        <section class="title">
            <span class="spanTitle">报告定时设置</span>
        </section>
        <div style="margin: 20px 10px">
            <span>报告类型：</span><span style="margin-right: 30px">{{ruleForm.reportType == 'day' ? '日报' : ruleForm.reportType == 'month' ? '月报': ruleForm.reportType == 'year' ? '年报' : ''}}</span>
            <span>报告形式：</span><span>{{radio == 3 ? 'HTML' : radio == 6 ? 'PPT' : radio == 9 ? 'WORD' : ''}}</span>
        </div>
        <section>
            <el-form :model="timing" :rules="rules" ref="timing" label-width="100px" class="demo-ruleForm">
                <el-form-item label="接收微信" prop="weChat" required>
                    <el-select v-model="timing.weChat">
                        <el-option label="wx123455" value="wx123455"></el-option>
                        <el-option label="shanghai" value="wxshanghai"></el-option>
                        <el-option label="beijing" value="wxbeijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="接收邮箱" prop="email" required>
                    <el-select v-model="timing.email">
                        <el-option label="981845322@qq.com" value="email1"></el-option>
                        <el-option label="2734199554@qq.com" value="email2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发送时间"    class="timeArea">
                    <el-form-item prop="sendTimeHour" required class="innerTime">
                        <el-select v-model="timing.sendTimeHour">
                            <el-option label="日报" value="day"></el-option>
                            <el-option label="月报" value="month"></el-option>
                            <el-option label="年报" value="year"></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="middleLine"></div>

                    <el-form-item prop="sendTimeMin" required class="innerTime">
                        <el-select v-model="timing.sendTimeMin">
                            <el-option label="日报" value="day"></el-option>
                            <el-option label="月报" value="month"></el-option>
                            <el-option label="年报" value="year"></el-option>
                        </el-select>
                    </el-form-item>

                </el-form-item>
                <el-checkbox-group v-model="timing.checkList">
                    <el-checkbox label="每周一"></el-checkbox>
                    <el-checkbox label="每周二"></el-checkbox>
                    <el-checkbox label="每周三"></el-checkbox>
                    <el-checkbox label="每周四"></el-checkbox>
                    <el-checkbox label="每周五"></el-checkbox>
                    <el-checkbox label="每周六"></el-checkbox>
                    <el-checkbox label="每周日"></el-checkbox>
                </el-checkbox-group>
                <el-form-item class="formFooter">
                    <el-button type="primary" @click="innerSubmitForm('timing')">完成</el-button>
                    <el-button type="primary" @click="back">上一步</el-button>
                    <el-button type="primary" @click="dialogVisible.outerVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </section>
    </el-dialog>
</template>

<script>
    export default {
        name: "QuickReportingModal",
        props:{
            dialogVisible:Object,
            ruleForm:Object
        },
        data() {
            return {
                timing:{
                  weChat:'',
                  email:'',
                  sendTimeMin:'',
                  sendTimeHour:'',
                  checkList:[]
                },
                isShow:true,
                radio: 3,
                innerVisible: false,
                rules: {
                    project:[
                        { required: true, message: '请输入所属项目', trigger: 'blur' },
                    ],
                    name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                    ],
                    template: [
                        { required: true, message: '请选择模板', trigger: 'change' }
                    ],
                    reportType:[
                        { required: true, message: '请选择报告类型', trigger: 'change' }
                    ],
                    reportDate: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    startData: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    endDate: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    weChat: [
                        { required: true, message: '请选择接收微信', trigger: 'change' }
                    ],
                    email:[
                        { required: true, message: '请选择接收邮箱', trigger: 'change' }
                    ],
                    sendTimeHour: [
                        { required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    sendTimeMin: [
                        { required: true, message: '请选择时间', trigger: 'change' }
                    ],
                },
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(this.ruleForm)
                        alert(this.ruleForm)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            innerSubmitForm(timing){
                this.$refs[timing].validate((valid) => {
                    if (valid) {
                        console.log(this.timing)
                        alert(this.timing)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            send(){
                this.isShow = false
                this.timing.sendTimeMin = 1
                this.timing.sendTimeHour = 2

                // console.log(this.radio)
            },
            back(){
                this.isShow = true

            }
            // handleClose(done) {
            //     done();
            //     // this.$confirm('确认关闭？')
            //     //     .then(() => {
            //     //         done();
            //     //     })
            //     //     .catch(() => {});
            // }
        },
        created() {
            console.log(this.ruleForm)
        }
    }
</script>

<style scoped>
    .stretch{
        /*font-size: 2vw;*/
        max-font-size: 20px!important;
    }
    .stretch p{
        font-size: 2vw;
        height: 20px;
    }
</style>
<style>
    .quickReportingOuter .el-dialog__header{
        padding: 0!important;
    }
    .quickReportingOuter .title{
        margin-bottom: 10px;
        font-weight: 700;
    }
    .quickReportingOuter .title .spanTitle{
        margin-right: 16px;
    }

    .quickReportingOuter .el-dialog{
        height: 380px!important;
    }

    .quickReportingOuter .el-radio{
        margin-right: 10px!important;
    }
    .quickReportingOuter .el-radio .el-radio__label{
        padding-left: 4px!important;
    }
    .quickReportingOuter .el-dialog{
        width: 400px;
    }
    .quickReportingOuter .el-dialog__body{
        padding: 14px 20px 14px 20px!important;
    }
    .quickReportingOuter .el-form-item__label{
        width: 66px!important;
        padding: 0;
    }
    .quickReportingOuter .formFooter .el-form-item__content{
        margin: 0!important;
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .quickReportingOuter  .el-form-item__content{
        margin-left: 76px!important;
        height: 33px!important;
    }
    .quickReportingOuter  .time .el-form-item__content{
        margin-left: 38px!important;


        /*padding: 0!important;*/
    }
    .quickReportingOuter .timeArea .el-form-item__content{
        display: flex;
        align-items: center;
        height: 46px!important;
    }
    .quickReportingOuter .innerTime{
        width: 44%;
    }
    .quickReportingOuter .innerTime .el-form-item__content{
        margin-left: 0!important;
    }
    .quickReportingOuter .timeArea .middleLine{
        width: 12%;
        height: 0;
        margin-bottom: 5px;
        /*height: 1px;*/
        border-top: 1px solid #ccc;
    }
    .quickReportingOuter .formFooter button{
        /*display: flex;*/
        padding: 0!important;
        width: 80px!important;
        height: 26px!important;
    }
    .quickReportingOuter .el-select{
        width: 100%;
    }
    .quickReportingOuter .el-input__inner{
        padding-right: 0!important;
    }
    .quickReportingOuter .el-input__inner{
        height: 26px!important;
    }
    .quickReportingOuter .el-form-item{
        margin-bottom: 6px!important;
    }
</style>